<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>约会详情</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/CSS.css">
    <script src="../js/jquery-3.3.1.js"></script>
    <script src="../layui/layui.all.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../js/JS.js"></script>
</head>
<style type="text/css">
            #paymentpaw{
            width: 100%;
            position:fixed;
            width: 100%;
            height: 100%;
            display: none;
            z-index: 9999;
            background: rgba(0,0,0,0.5);
        }
        .enter{
            width: 100%;
            background:#FFFFFF;
            z-index: 102;
            position: fixed;
            bottom:0;
            z-index: 102;
            height: 50%;

        }
        .enter-close{
            width: 100%;
            padding: 1% 0;
        }
        .enter-close i{
            width: 1.5em;
            height: 1.5em;
            display: block;
            float: right;
            margin-right: 3%;
            margin-top: 3%;
            font-style: normal;
        }
        .enter-text{
            width: 100%;
            text-align: center;
            color: #8D8D8D;
            border-bottom:2px solid #F5F5F5 ;
            padding: 2% 0;
            margin-bottom: 4%;
        }
        .enter-input{
            text-align: center;

        }
        .enter-input input{
            width: 90%;
            border: 1px solid #CCCCCC;
            padding: 2% 0;
            text-align: center;
            font-size: 16px;
            display: inline-block;

        }
        .queding{
            padding: 3%;
        }
        .queding span{
            width: 100%;
            display: block;
            background: #57d5f3;
            border-radius: 15px;
            color: #fff;
            padding: 5px 0;
            text-align: center;
        }
        </style>
<body style="background: #fff">
<header>
    <a href="javascript:history.back(-1)" class="back"><img src="../img/back.png" height="18px"></a>
    <div class="center title">约会详情</div>
</header>
<form action="">
    <div class="yuhui">
        <!-- <ul class="outing_info clearfix">
        <li class=""><img src="../img/logo.png" alt=""></li>
        <li>
            <p>
                <span><img src="../img/description.png" alt=""></span>
                <span>有人星期天一起去散步吗?</span>
            </p>
            <p>
                <span><img src="../img/location.png" alt=""></span>
                <span>河边</span>
            </p>
            <p>
                <span><img src="../img/time.png" alt=""></span>
                <span>4月30日 下午5点</span>
            </p>
        </li>
    </ul>
    <ul class="clearfix date_img">
        <p>约会地点照片</p>
        <li><img src="../img/logo.png" alt=""></li>
        <li><img src="../img/logo.png" alt=""></li>
        <li><img src="../img/logo.png" alt=""></li>
    </ul>
    <ul class="outing_info2 clearfix">
        <li class="clearfix">
        <span class="fl">
            需要人数:<b>1人</b>
        </span>
            <span class="fr">
            悬赏金:<b>500美金</b>
        </span>
        </li>
        <li>
            <span>诚意金:<b>10美金</b></span>
        </li>
        <li>
            支付方式:
            <span><input type="radio" name="pay" value="" checked>平台担保</span>
            <span><input type="radio" name="pay" value="">线下付款</span>
        </li>
    </ul> -->
    </div>
    <div class="outing_enroll"><input type="button" name="" value="报名"></div>
    <div class="confirm_enroll">
        <ul class="confirm_enroll_ul">
            <li>报名 <i class="close"></i></li>
            <li>提示:报名即扣除1美金</li>
            <li class="clearfix">
            <span class="fl" id="m-number">
                账户余额:<b>300</b>美金
            </span>
                <span class="fr"><a href="recharge_usd.html">去充值</a></span>
            </li>
            <li class="confirm_btn"><input type="button" name="" value="确认报名"></li>
        </ul>
    </div>
    <div id="paymentpaw">

            <div class="enter">
                <div class="enter-close clearfix">
                    <i>x</i>
                </div>
                <div class="enter-text">请输入支付密码</div>
                <div class="enter-input">
                    <input type="password" name="pay" placeholder="输入支付密码">
                </div>

                <div class="queding"><span>确定</span></div>
            </div>
        </div>
</form>
</body>
</html>
<script>
    $.each($('.outing_info2 li:nth-child(3) span'),function () {

        var checked=$(this).find('input[type="radio"]').prop('checked');
        if(checked){
            $(this).css('color','#54cae8');
        }
    });
    $(document).on('click','.outing_info2 li:nth-child(3) span',function(){
        $(this).find('input[type="radio"]').prop('checked',true);
        $(this).css('color','#54cae8').siblings().css('color','#666');
    });       

    $('.outing_enroll').click(function () {
        $('.confirm_enroll').show();
    });
    $('.close').click(function () {
        $('.confirm_enroll').hide();
    });
     function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        }
        //接收URL中的参数id
        var id = getUrlParam('id');
        console.log(id);
        $.ajax({
            url:'/meiyou/selYueHuiDetails',
            type:"post",
            data:'yId='+id,
            success:function(data){
                console.log(data);
                $('.yuhui').append("<ul class=\"outing_info clearfix\">" +
                    "        <li class=\"\"><img src='"+data.array[0]+"' alt=\"\"></li>" +
                    "        <li>" +
                    "            <p>" +
                    "                <span><img src=\"../img/description.png\" alt=\"\"></span>" +
                    "                <span>"+data.y_context+"</span>" +
                    "            </p>" +
                    "            <p>" +
                    "                <span><img src=\"../img/location.png\" alt=\"\"></span>" +
                    "                <span>"+data.y_address+"</span>" +
                    "            </p>" +
                    "            <p>" +
                    "                <span><img src=\"../img/time.png\" alt=\"\"></span>" +
                    "                <span>"+data.y_date+"</span>" +
                    "            </p>" +
                    "        </li>" +
                    "    </ul>" +
                    "    <ul class=\"clearfix date_img\">" +
                    "        <p>约会地点照片</p>" +
                    "    </ul>" +
                    "    <ul class=\"outing_info2 clearfix\">" +
                    "        <li class=\"clearfix\">" +
                    "        <span class=\"fl\">" +
                    "            需要人数:<b>1人</b>" +
                    "        </span>" +
                    "            <span class=\"fr\">" +
                    "            悬赏金:<b>"+data.y_meijin+"</b>" +
                    "        </span>" +
                    "        </li>" +
                    "        <li>" +
                    "            <span>诚意金:<b>"+data.j_value+"</b></span>" +
                    "        </li>" +     
                    "    </ul>");
                    $.each(data.array,function(i,val){
                        $('.date_img').append("<li>"+"<img src='"+val+"'>"+"</li>");
                    });
            }
        });
        $('.confirm_btn').click(function(){
            $(this).hide();
            $('#paymentpaw').show();
        });
        $('.enter-close').click(function(){
             $('#paymentpaw').hide();
        });
        $('.queding').click(function(){
            var uCount = localStorage.getItem("uCount");
            var pay=$('input[name="pay"]').val();
            console.log(id);
            console.log(uCount);
            console.log(pay);
            $.post('/meiyou/YuehuiApply',{
                uCount:uCount,
                pay:pay,
                yId:id
            },function(data){
                console.log(data);
                 if(data.code==100){
                    layer.msg(data.msg,function(){
                    window.location.reload();
                });
                }else{
                    layer.msg(data.msg);
                }
            });

        });
        $.post('/meiyou/getMeijin',function(data){
        $('#m-number b').text("￥"+data.meijin);
    });

        
</script>
